<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.util.*" %>
<xn:title text="校内XNJS Animation演示" />

<br>
<br>
<h2>
XNJS Animation演示
</h2>
API文档见<a href="http://dev.xiaonei.com/wiki/Animation">XNJS Animation</a>

<hr>
<br>
<h4>
第一个演示：改变CSS属性
</h4>
<br>
<br>
<br>

<p>
  用to()函数指定动画起始状态，调用go()函数开始播放动画：
</p>
<a href="#" onclick="Animation(this).to('background', '#ffff4b').go(); return false;">点击改变背景色</a><br>
<br>
<a href="#" onclick="Animation(this).to('background', '#ffff4b').to('color', '#ff0000').go(); return false;">同时改变背景和文字颜色</a><br>
<br>
<p>
  用from()函数指定动画起始状态：
</p>
<a href="#" onclick="Animation(this).to('background', '#fff').from('#ffff4b').go(); return false;">点击改变背景色</a><br>
<br>
<p>
  当from()和to()函数一起使用时，其中一个的参数可以省略一个。
</p>
<p>
  下面链接中的代码省略了from的第一个参数：
</p>
<a href="#" onclick="Animation(this).to('background', '#fff').from('#ffff4b').go(); return false;">点击改变背景色</a><br>
<br>
<p>
  下面链接中的代码省略了to的第一个参数：
</p>
<a href="#" onclick="Animation(this).from('background', '#ffff4b').to('#fff').go(); return false;">点击改变背景色</a><br>
<br>
<p>
  用by()函数增加指定CSS属性的当前值（注意'position'属性的值不能是'static'）：
</p>
<div id="move_container" style="position: relative; left: 0px">
  <a href="#" onclick="Animation(document.getElementById('move_container')).by('left', '15px').go(); return false;">向右移动15个象素</a>
</div>
<br>

<hr>
<br>
<h4>
第二个演示：控制动画持续时间
</h4>
<br>
<br>
<br>

<p>
  动画播放持续时间默认为1秒。如果想加快或减慢播放速度，需要使用duration(miliseconds)函数：
</p>
<a href="#" onclick="Animation(this).to('background', '#ffff4b').from('#fff').to('color', '#ff0000').from('#000').duration(3000).go(); return false;">同时改变背景和文字颜色，过程花3秒时间</a><br>
<br>

<hr>
<br>
<h4>
第三个演示：消失效果
</h4>
<br>
<br>
<br>

<p>
  用hide()函数显示消失效果：
</p>
<div style="overflow: hidden" id="hide_container"> <img src="http://xnimg.cn/img/platform/banner_icon.gif" /><br />
  <a href="#" onclick="Animation(document.getElementById('hide_container')).to('height', '0px').to('opacity', 0).hide().go(); return false;">点击图片消失</a>
</div>
<br>

<p>
  <b>用hide()函数使一段文字消失，文字会不断滚动：</b>
</p>
<div id="text_wrapping_container"> 
校内是一个真实社交网络，加入她你可以：
联络朋友，了解他们的最新动态 ；
用照片和日志记录生活，展示自我;；
找到老同学结识新朋友 ；
和朋友分享相片、音乐和电影 ；
自由、安全地控制个人隐私 。
“校内网开放平台”是指由校内网所有并运营的一些软件和支持材料，开发者通过这些软件和支持材料开发校内网插件应用程序。开发者平台可能包括但不限于一个或多个API、编程工具和文档。
“校内网插件应用程序”是指由开发者提供并可能在校内网上使用和/或与之连接的应用程序。
<br /> 
<a href="#" onclick="Animation(document.getElementById('text_wrapping_container')).to('height', '0px').to('width', '0px').to('opacity', 0).duration(5000).hide().go(); return false;">点击文字消失</a>. 
</div>
<br>

<p>
  <b>若不想让文字在动画中滚动，需要使用用blind()函数：</b>
</p>
<div id="prevent_text_wrapping_container"> 
校内是一个真实社交网络，加入她你可以：
联络朋友，了解他们的最新动态 ；
用照片和日志记录生活，展示自我;；
找到老同学结识新朋友 ；
和朋友分享相片、音乐和电影 ；
自由、安全地控制个人隐私 。
“校内网开放平台”是指由校内网所有并运营的一些软件和支持材料，开发者通过这些软件和支持材料开发校内网插件应用程序。开发者平台可能包括但不限于一个或多个API、编程工具和文档。
“校内网插件应用程序”是指由开发者提供并可能在校内网上使用和/或与之连接的应用程序。
<br /> 
<a href="#" onclick="Animation(document.getElementById('prevent_text_wrapping_container')).to('height', '0px').to('width', '0px').to('opacity', 0).blind().duration(5000).hide().go(); return false;">点击文字消失，并防止文字滚动</a>. 
</div>
<br>

<hr>
<br>
<h4>
第四个演示：出现效果
</h4>
<br>
<br>
<br>

<p>
  <b>用show()函数显示出现效果：</b>
</p>
<div id="show_div" style="display: none"> 
校内是一个真实社交网络，加入她你可以：
联络朋友，了解他们的最新动态 ；
用照片和日志记录生活，展示自我;；
找到老同学结识新朋友 ；
和朋友分享相片、音乐和电影 ；
自由、安全地控制个人隐私 。
“校内网开放平台”是指由校内网所有并运营的一些软件和支持材料，开发者通过这些软件和支持材料开发校内网插件应用程序。开发者平台可能包括但不限于一个或多个API、编程工具和文档。
“校内网插件应用程序”是指由开发者提供并可能在校内网上使用和/或与之连接的应用程序。
</div> 
<a href="#" onclick="Animation(document.getElementById('show_div')).to('height', 'auto').from('0px').to('width', 'auto').from('0px').to('opacity', 1).from(0).blind().show().duration(3000).go(); return false;">显示一段文字，并防止文字滚动</a><br>
<br>

<hr>
<br>
<h4>
第五个演示：如何停止动画播放
</h4>
<br>
<br>
<br>

<p>
  <b>用stop()函数停止动画播放：</b>
</p>
<script>
<!--
  var stop_anim = null;
//-->
</script>
<div id="stop_div" style="display: none"> 
校内是一个真实社交网络，加入她你可以：
联络朋友，了解他们的最新动态 ；
用照片和日志记录生活，展示自我;；
找到老同学结识新朋友 ；
和朋友分享相片、音乐和电影 ；
自由、安全地控制个人隐私 。
“校内网开放平台”是指由校内网所有并运营的一些软件和支持材料，开发者通过这些软件和支持材料开发校内网插件应用程序。开发者平台可能包括但不限于一个或多个API、编程工具和文档。
“校内网插件应用程序”是指由开发者提供并可能在校内网上使用和/或与之连接的应用程序。
</div> 
<a href="#" onclick="stop_anim = Animation(document.getElementById('stop_div')).to('height', 'auto').from('0px').to('width', 'auto').from('0px').to('opacity', 1).from(0).blind().show().duration(5000).go(); return false;">播放动画</a><br>
<a href="#" onclick="if (stop_anim) {stop_anim.stop(); stop_anim = null;} return false;">停止动画！</a><br>
<br>


<hr>
<br>
<h4>
第六个演示：设置渐变效果
</h4>
<br>
<br>
<br>

<p>
  <b>默认的渐变过程是一个线性的均匀变化的过程，若想改变渐变效果，可以使用ease()调用来设置一个easing函数。XNJS Animation预定义了三个easing函数：
  Animation.ease.begin, Animation.ease.end和Animation.ease.both。下面演示了Animation.ease.end的效果。</b>
</p>
<div id="ease_container">
校内是一个真实社交网络，加入她你可以：
联络朋友，了解他们的最新动态 ；
用照片和日志记录生活，展示自我;；
找到老同学结识新朋友 ；
和朋友分享相片、音乐和电影 ；
自由、安全地控制个人隐私 。
“校内网开放平台”是指由校内网所有并运营的一些软件和支持材料，开发者通过这些软件和支持材料开发校内网插件应用程序。开发者平台可能包括但不限于一个或多个API、编程工具和文档。
“校内网插件应用程序”是指由开发者提供并可能在校内网上使用和/或与之连接的应用程序。
<br /> 
<a href="#" onclick="Animation(document.getElementById('ease_container')).to('height', '0px').to('width', '0px').to('opacity', 0).blind().hide().ease(Animation.ease.end).duration(3000).go(); return false;">点击文字消失</a>. 
</div>
<br>

<p>
  <b>用ease()调用来设置一个自定义的easing函数：</b>
</p>
<div id="custom_ease_container" style="width: 400px"> 
<br />
校内是一个真实社交网络，加入她你可以：
联络朋友，了解他们的最新动态 ；
用照片和日志记录生活，展示自我;；
找到老同学结识新朋友 ；
和朋友分享相片、音乐和电影 ；
自由、安全地控制个人隐私 。
“校内网开放平台”是指由校内网所有并运营的一些软件和支持材料，开发者通过这些软件和支持材料开发校内网插件应用程序。开发者平台可能包括但不限于一个或多个API、编程工具和文档。
“校内网插件应用程序”是指由开发者提供并可能在校内网上使用和/或与之连接的应用程序。
<br>
<a href="#" onclick="Animation(document.getElementById('custom_ease_container')).to('height', '0px').blind().hide().ease(bounceEase).duration(6000).go(); return false;">点击文字消失，自定义easing函数</a>. 
</div> 
<script>
<!--
  function bounceEase(p) {
    if (p < 0.33) {
      return 0.33
    }
    else if (p < 0.66) {
      return 0.66
    }
    else {
      return p;
    }
  }
//-->
</script>
<br>

<hr>
<br>
<h4>
第七个演示：设置动画检查点
</h4>
<br>
<br>
<br>
<p>
  <b>用checkpoint()函数来设置检查点，检查点分割前后两段动画：</b>
</p>
<div id="checkpoint_div" style="display: none; border: 1px solid #bdc7d8; padding: 0px 3px">
校内是一个真实社交网络，加入她你可以：
联络朋友，了解他们的最新动态 ；
用照片和日志记录生活，展示自我;；
找到老同学结识新朋友 ；
和朋友分享相片、音乐和电影 ；
自由、安全地控制个人隐私 。
“校内网开放平台”是指由校内网所有并运营的一些软件和支持材料，开发者通过这些软件和支持材料开发校内网插件应用程序。开发者平台可能包括但不限于一个或多个API、编程工具和文档。
“校内网插件应用程序”是指由开发者提供并可能在校内网上使用和/或与之连接的应用程序。
</div> 
<a href="#" onclick="Animation(document.getElementById('checkpoint_div')).to('height', '0px').from('0px').to('width', 'auto').from('0px').show().blind().duration(2000).checkpoint().to('height', 'auto').blind().duration(5000).go(); return false;">先横向展开再纵向展开</a><br>
<br>

<p>
  <b>默认情况下，要等checkpoint()前面的动画播放完毕后面的动画才开始播放，但也可以通过传给checkpoint()一个参数来使两个动作交错进行。下面的演示中，文字先变到半透明，然后开始文字消失的动作：</b>
</p>
<div id="checkpoint_stagger_container"> 
校内是一个真实社交网络，加入她你可以：
联络朋友，了解他们的最新动态 ；
用照片和日志记录生活，展示自我;；
找到老同学结识新朋友 ；
和朋友分享相片、音乐和电影 ；
自由、安全地控制个人隐私 。
“校内网开放平台”是指由校内网所有并运营的一些软件和支持材料，开发者通过这些软件和支持材料开发校内网插件应用程序。开发者平台可能包括但不限于一个或多个API、编程工具和文档。
“校内网插件应用程序”是指由开发者提供并可能在校内网上使用和/或与之连接的应用程序。
<br /> 
<a href="#" onclick="Animation(document.getElementById('checkpoint_stagger_container')).to('opacity', 0).duration(8000).checkpoint(0.5).to('height', '0px').blind().hide().duration(4000).go(); return false;">交错进行“文字透明”和“文字消失”两个动作</a>
</div>
<br>

<hr>
<br>
<h4>
第八个演示：注册callback
</h4>
<br>
<br>
<br>
<p>
  <b>用ondone()函数注册callback函数，动画完成后调用。下面的演示先显示一段文字，完成后调用一个callback函数来弹出一个对话框：</b>
</p>
<div id="ondone_div" style="display: none"> 
校内是一个真实社交网络，加入她你可以：
联络朋友，了解他们的最新动态 ；
用照片和日志记录生活，展示自我;；
找到老同学结识新朋友 ；
和朋友分享相片、音乐和电影 ；
自由、安全地控制个人隐私 。
“校内网开放平台”是指由校内网所有并运营的一些软件和支持材料，开发者通过这些软件和支持材料开发校内网插件应用程序。开发者平台可能包括但不限于一个或多个API、编程工具和文档。
“校内网插件应用程序”是指由开发者提供并可能在校内网上使用和/或与之连接的应用程序。
</div> 
<a href="#" onclick="Animation(document.getElementById('ondone_div')).to('height', 'auto').from('0px').to('width', 'auto').from('0px').to('opacity', 1).from(0).blind().show().duration(3000).ondone(ondone_callback).go(); return false;">显示文字，然后显示一个对话框</a><br>
<script>
<!--
function ondone_callback(){
  new Dialog(Dialog.DIALOG_ALERT, '动画已完成。本对话框是由注册的callback函数创建的。', 'callback函数被调用');
}
//-->
</script>
<br>

<p>
  <b>用checkpoint()函数也可以注册callback函数，在动画播放至检查点时被调用。下面的演示先使一段文字消失，到达检查点，然后执行注册的callback函数，在callback函数中播放另一段动画，即显示另一段文字：</b>
</p>
<div id="checkpoint_callback_container">
校内是一个真实社交网络，加入她你可以：
联络朋友，了解他们的最新动态 ；
用照片和日志记录生活，展示自我;；
找到老同学结识新朋友 ；
和朋友分享相片、音乐和电影 ；
自由、安全地控制个人隐私 。
<br /> 
<a href="#" onclick="Animation(document.getElementById('checkpoint_callback_container')).to('width', '0px').to('height', '0px').to('opacity', 0).blind().hide() .duration(1500).checkpoint(1, function() { 
	  Animation(document.getElementById('next_show_div')).to('height', 'auto').from('0px').to('width', 'auto').from('0px').to('opacity', 1).from(0).blind().show().duration(1500).go();
  }) .go(); return false;">点击后上面的文字消失，然后显示另一段文字</a> 
</div> 
<div id="next_show_div" style="display: none"> 
“校内网开放平台”是指由校内网所有并运营的一些软件和支持材料，开发者通过这些软件和支持材料开发校内网插件应用程序。开发者平台可能包括但不限于一个或多个API、编程工具和文档。
“校内网插件应用程序”是指由开发者提供并可能在校内网上使用和/或与之连接的应用程序。
“校内网开放平台”是指由校内网所有并运营的一些软件和支持材料，开发者通过这些软件和支持材料开发校内网插件应用程序。开发者平台可能包括但不限于一个或多个API、编程工具和文档。
“校内网插件应用程序”是指由开发者提供并可能在校内网上使用和/或与之连接的应用程序。
“校内网开放平台”是指由校内网所有并运营的一些软件和支持材料，开发者通过这些软件和支持材料开发校内网插件应用程序。开发者平台可能包括但不限于一个或多个API、编程工具和文档。
“校内网插件应用程序”是指由开发者提供并可能在校内网上使用和/或与之连接的应用程序。
</div>
<br>


<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
